<%@ page import="java.util.HashMap" %>
<%@ page import="java.util.Objects" %>
<%@ page import="java.util.ArrayList" %>

<%--
  Created by IntelliJ IDEA.
  User: PurpleFish
  Date: 2024/12/30
  Time: 20:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>首页</title>
</head>
<body>
<script>
    window.onload = function() {
        document.getElementById('searchForm').addEventListener('submit', function(event) {
            let searchInput = document.getElementById('searchInput').value.trim();
            if (searchInput === '') {
                event.preventDefault(); // 阻止表单的默认提交行为
                alert('请输入搜索内容！');
            }
        });
        fetch('${pageContext.request.contextPath}/Product.ProductServlet')
            .then(response => response.json()) // 解析JSON
            .then(data => {
                console.log(`${pageContext.request.contextPath}`)
                const container = document.querySelector('.body');
                data.forEach(product => {
                    let pid = product.pid;
                    let img = product.image;
                    let d1 = product.name;
                    let d2 = product.description;
                    let d3 = product.price;
                    const productDiv = document.createElement('div');
                    productDiv.className = "product"
                    productDiv.innerHTML = `<a href="${pageContext.request.contextPath}/productDetail?pid=`+pid+`"><h4>`+d1+`</h4><img class="img" src="`+img+`" /><div class="price">价格：`+d3+`</div><p>`+d2+`</p></a>`;
                    container.appendChild(productDiv);
                });
            })
            .catch(error => console.error('Error:', error));
    };

</script>

<div class="top-nav">
    <div style="display: flex">
        <div class="logo">淘宝</div>
        <a class="nav-tab active">推荐商品</a>
        <%
            HashMap<String,String> user =  (HashMap<String, String>) request.getSession().getAttribute("user");
            int userRole = 0;
            if(user==null){

            }else{
                userRole = Integer.parseInt(user.get("roleId"));// 从会话中获取用户ID
            }

        %>
        <a class="nav-tab" href="${pageContext.request.contextPath}/favorites?action=favorites">我的关注</a>
        <a class="nav-tab" href="${pageContext.request.contextPath}/OrderServlet" target="_blank">订单管理</a>
        <a class="nav-tab" href="${pageContext.request.contextPath}/CartServlet" target="_blank">购物车</a>
        <a class="nav-tab" href="${pageContext.request.contextPath}/welcome.jsp" target="_blank">我的</a>
        <a style="display: <%=userRole==1?"inline-block":"none"%>" class="nav-tab" href="${pageContext.request.contextPath}/manageProducts.jsp"target="_blank">商品管理</a>
    </div>
    <div class="search">
        <form action="search" method="post" id="searchForm">
            <label>
                <input type="text" name="search" value="${param.search}" id="searchInput"/>
            </label>
            <button type="submit">搜索</button>
        </form>
    </div>
</div>
<div class="body">
</div>
</body>
</html>
<style>
    .img{
        max-width: 90%;
        max-height: 100px;
    }
    .search button{
        background-color: orange;
        height: 23px;
        width: 60px;
        border: none;
        border-radius: 5px;
    }
    .search input{
        height: 23px;
        width: 200px;
    }
    .search div{
        width: 60px;
    }
    .search{
        padding-right: 20px;
        width: 300px;
        display: flex;
        align-items: center;
    }
    .price{
        color: grey;
        font-size: 12px;
    }
    .product a p {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3; /* 限制为3行 */
        overflow: hidden;
        text-overflow: ellipsis;
        height: 75px;
    }
    .product a{
        width: 100%;
    }
    .product{
        width: 18%;
        min-width: 200px;
        margin: 5px 4px;
        padding: 10px;
        background-color: white;
        line-height: 25px;
    }
    *{
        margin: 0;
        padding: 0;
    }
    .body{
        padding: 10px;
        min-width: 600px;
        display: flex;
        justify-content: left;
        flex-wrap: wrap;
        background-color: #f1f1f1;
    }
    .active{
        background-color: grey;
    }
    .top-nav{
        display: inline-flex;
        width: 100%;
        min-width: 600px;
        height: 50px;
        border-bottom: 1px solid;
        font-size: 16px;
        align-items: center;
        justify-content: space-between;
    }
    .nav-tab{
        width: 120px;
        height: 50px;
        line-height: 50px;
        text-align: center;
    }
    .nav-tab:hover{
        background-color: grey;
    }
    .logo{
        display: inline-flex;
        font-size: 24px;
        width: 120px;
        height: 50px;
        justify-content: center;
        align-items: center;
        text-align: center;
        background-color: orange;
        font-weight: bolder;
    }
    a{
        display: inline-block;
        text-decoration: none;
        color: inherit;
        cursor: default;
        outline: none;
    }
</style>